import { ethers } from 'ethers';
import logo from '../assets/logo512.png';

const Navigation = ({ token, account, setAccount, users, setCurUser, setBalance }) => {
    const connectHandler = async () => {
        const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
        const account = ethers.utils.getAddress(accounts[0]);
        const balance = await token.balanceOf(account);
        setBalance(balance.toString());
        setAccount(account);
        users.map(item => {
            if (item.address === account) {
              setCurUser(item)
              console.log(item.address)
            }
          });
    }

    return (
        <nav>
            <ul className='nav__links'>
                <li><a href="#">Individual</a></li>
                <li><a href="#">Bussiness</a></li>
                <li><a href="#">Others</a></li>
            </ul>

            <div className='nav__brand'>
                <img src={logo} alt="Logo" />
                <h1>IgniteBlock</h1>
            </div>

            {account ? (
                <button
                    type="button"
                    className='nav__connect'
                >
                    {account.slice(0, 6) + '...' + account.slice(38, 42)}
                </button>
            ) : (
                <button
                    type="button"
                    className='nav__connect'
                    onClick={connectHandler}
                >
                    Connect
                </button>
            )}
        </nav>
    );
}

export default Navigation;